<template>
  <div class="notFound">
    <el-drawer :title="title" :visible="drawerVisible"
               :modal-append-to-body="false"
               :append-to-body="true"
               :wrapperClosable="false" :before-close="handleClose" :size="type === 'put' ? '50%' :'70%'"
    >
      <div class="drawerBody">
        <!-- 查看 -->
        <div v-if="type === 'check'">
          <el-row class="check-search">
            <el-form :model="checkQuery" ref="checkForm" label-width="100px">
              <el-col :span="7">
                <el-form-item prop="platform">
                  <div slot="label">
                    <el-checkbox v-model="checkTable.platform" @change="changeTableColumn($event,'platform')">媒体
                    </el-checkbox>
                  </div>
                  <el-select size="mini" v-model="checkQuery.platform" placeholder="请选择媒体" clearable
                             ref="performPlatform" @change="submitCheckForm">
                    <el-option v-for="item in checkInit.platformList"
                               :key="item.dictKey"
                               :label="item.dictValue"
                               :value="item.dictKey">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item prop="countryList">
                  <div slot="label">
                    <el-checkbox v-model="checkTable.countryList" @change="changeTableColumn($event,'countryList')">投放地区
                    </el-checkbox>
                  </div>
                  <el-select size="mini" v-model="checkQuery.nationList" placeholder="请选择媒体" clearable
                             ref="performPlatform" @change="submitCheckForm">
                    <el-option v-for="(item,index) in checkInit.nationList"
                               :key="index"
                               :label="item.dictValue"
                               :value="item.dictKey">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item prop="updateTimeRange">
                  <div slot="label">
                    <el-checkbox v-model="checkTable.updateTimeRange"
                                 @change="changeTableColumn($event,'updateTimeRange')">更新时间
                    </el-checkbox>
                  </div>
                  <el-date-picker
                    style="width: 60%"
                    size="mini"
                    v-model="updateTimeRange"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions"
                    ref="performTime" @change="submitCheckForm">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
          <div class="check-table">
            <avue-crud :option="checkOption"
                       :data="checkData"
                       :page="page"
                       :table-loading="loading"
                       @current-change="currentChange"
                       @size-change="sizeChange"
                       @on-load="onCheckLoad"
            >
            </avue-crud>
          </div>
        </div>
        <!-- 入库  -->
        <div v-if="type === 'put'"   v-loading="putLoading">
          <el-form :model="putForm" ref="putForm" label-width="110px" :rules="rules">
            <el-row :gutter="10" style="display: flex;flex-wrap: wrap">
              <el-col :span="12">
                <el-form-item label="素材设计者" prop="designer">
                  <el-select v-model="putForm.designer" size="mini" filterable clearable style="width: 100%">
                    <el-option v-for="(item,index) in putInit.originatorList" :key="index" :value="item.id"
                               :label="item.realName">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="素材状态" prop="type">
                  <el-radio-group v-model="putForm.type">
                    <el-radio :label="1">成品素材</el-radio>
                    <el-radio :label="0" disabled>制作中素材</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item label="原创者" prop="originator">
                  <el-select v-model="putForm.originator" size="mini" clearable filterable style="width: 100%">
                    <el-option v-for="(item,index) in putInit.originatorList" :key="index" :label="item.realName"
                               :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="制作用时" prop="makeTime">
                  <el-input-number v-model="putForm.makeTime.hour" :controls="false" :min="0" style="width: 50px"
                                   :max="2400" size="mini" :step-strictly="true"
                                   @blur="() =>{if(!putForm.makeTime.minute)putForm.makeTime.minute = 0 ; if(!putForm.makeTime.hour)putForm.makeTime.hour = 0}">

                  </el-input-number>
                  &nbsp 小时 &nbsp
                  <el-input-number v-model="putForm.makeTime.minute" :controls="false" :min="0" style="width: 50px"
                                   :max="59" size="mini" :step-strictly="true"
                                   @blur="() =>{if(!putForm.makeTime.hour)putForm.makeTime.hour = 0;if(!putForm.makeTime.minute)putForm.makeTime.minute = 0 ;}">
                  </el-input-number>
                  &nbsp 分钟
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item label="被拒素材" prop="refuseCreativeId">
                  <el-select v-model="putForm.refuseCreativeId" size="mini" filterable clearable style="width: 100%">
<!--                    <el-option v-for="(item,index) in putInit.originatorList" :key="index" :label="item.realName"-->
<!--                               :value="item.id">-->
<!--                    </el-option>-->
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-form-item label="入库素材" prop="ids">
                <div style="display: flex;overflow-x: scroll">
                  <div v-for="(item, index) in rowsList" :key="index"
                       style="margin-right: 20px">
                    <el-image v-if="item.type === 0" :src="getUrl(item)"
                              style="width: 100px;height: 100px" fit="contain"></el-image>
                    <video v-if="item.type === 1" :src="getUrl(item)"
                           style="width: 100px;height: 100px"></video>
                  </div>
                </div>
              </el-form-item>
            </el-row>
            <el-row style="display: flex;justify-content: center">
              <el-button type="primary" size="small" @click="putNotFoundCreative">入库</el-button>
              <el-button size="small" @click="handleClose">取消</el-button>
            </el-row>
          </el-form>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {checkNotFound, saveToCreative} from "@/api/creativeReport/notFoundCreative";

export default {
  name: "notfoundAddCreative",
  props: {
    title: {
      type: String
    },
    drawerVisible: {
      type: Boolean
    },
    type: {
      type: String
    },
    checkInit: {
      type: Object
    },
    putInit: {
      type: Object
    },
    rowsList: {
      type: Object
    }
  },
  data() {
    return {
      checkTable: {
        platform: false,
        country: false,
        uploadTime: false,
      },
      checkQuery: {
        platform: "",
        countryList: '',
      },
      updateTimeRange: [],
      putForm: {
        designer: '',
        refuseCreativeId: '',
        originator: '',
        makeTime: {
          hour: '',
          minute: '',
        },
        type: 1
      },
      rules: {
        designer: [{required: true, message: '请选择设计师', trigger: 'change'}],
        demandIsProd: [{required: true, message: '请选择素材状态', trigger: 'change'}],
        makeTime: [{required: true,message:"请输入制作时间",trigger: "change",},{required: true, trigger: 'change'}],
      },
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      checkOption: {
        refreshBtn: false,
        columnBtn: false,
        addBtn: false,
        index: false,
        menu: false,
        selection: false,
        column: [
          {
            label: "花费",
            prop: "spend",
            rules: [
              {
                required: true,
                trigger: "blur",
              },
            ],
            sortable: 'custom',
          },
          {
            label: "曝光",
            prop: "impressions",
            rules: [
              {
                required: true,
                trigger: "blur",
              },
            ],
            width: 120,
            sortable: 'custom',
          },
          {
            label: "点击",
            prop: "clicks",
            rules: [
              {
                required: true,
                trigger: "blur",
              },
            ],
            sortable: 'custom',
          },
          {
            label: "CTR",
            prop: "ctr",
            rules: [
              {
                required: true,
                trigger: "blur",
              },
            ],
            slot: true,
            sortable: 'custom',
          },
          {
            label: "安装",
            prop: "install",
            rules: [
              {
                required: true,
                trigger: "blur",
              },
            ],
            sortable: 'custom',
          },
          {
            label: '安装成本',
            prop: 'cost'
          },
          {
            label: "CVR",
            prop: "cvr",
            rules: [
              {
                required: true,
                message: "请输入CVR",
                trigger: "blur",
              },
            ],
            slot: true,
            sortable: 'custom',
          },
        ],
      },
      checkData: [],
      loading: false,
      putLoading:false,
    }
  },
  methods: {
    changeTableColumn(val, type) {
      let option = {
        platform: {
          label: "媒体",
          prop: "platform",
          width: 150
        },
        countryList: {
          label: "投放地区",
          prop: "countryList",
          multiple: true,
          type: 'select',
          dataType: 'string',
          dicData: [],
          props: {
            label: "dictValue",
            value: "dictKey"
          },
          width: 150
        },
        updateTimeRange: {
          label: "更新日期",
          prop: "updateTimeRange",
          width: 150
        }
      }
      if (val) {
        this.checkOption.column.unshift(option[type])
      } else {
        this.checkOption.column.splice(this.checkOption.column.findIndex(item => item.prop === type), 1)
      }
    },
    /**
     * 入库按钮
     */
    putNotFoundCreative() {
      this.$refs.putForm.validate(valid => {
        if (valid) {
          let makeTime = this.putForm.makeTime.hour * 60 + this.putForm.makeTime.minute;
          if (makeTime <= 0) {
            this.$message({
              type: 'error',
              message: '制作时长需要大于0！'
            })
            return;
          }

          this.putLoading=true;
          let names = []
          let offerId = this.putInit.offerId;
          // let fileMap=[];
          // this.rowsList.map(item => {
          //   names.push(item.name)
          //   let  file={};
          //   file.name=item.name;
          //   file.url=item.assetUrl;
          //   fileMap.push(file)
          // })
          let data = {
            designer: this.putForm.designer,
            makeTime: this.putForm.makeTime.hour * 60 + this.putForm.makeTime.minute,
            originator: this.putForm.originator,
            refuseCreativeId: this.putForm.refuseCreativeId,
            type: this.putForm.type,
            offerId: offerId,
            items:this.rowsList,
          }
          saveToCreative(data).then(res => {
            this.putLoading=false;
            if (res.status === 200) {
              this.$message.success("未知素材入库成功!")
              this.handleClose(true);
            }
          })
        }
      });


    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    /**
     * 搜索查询页面
     */
    submitCheckForm() {
      this.onCheckLoad(this.page)
    },
    /**
     * 查询table
     */
    onCheckLoad(page, params = {}) {
      this.loading = true;
      this.checkQuery['name'] = this.rowsList[0].name
      if (this.updateTimeRange && this.updateTimeRange.length > 0) {
        this.checkQuery['beginDate'] = this.updateTimeRange[0]
        this.checkQuery['endDate'] = this.updateTimeRange[1]
      }
      checkNotFound(
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.checkQuery)).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.checkData = data.records;
        this.loading = false;
      });
    },
    /**
     * 关闭弹窗
     */
    handleClose(update) {
      if (this.type === 'put') {
        this.$refs.putForm.resetFields();
        this.rowsList = [];
        this.putForm.makeTime = {hour: '',minute: ''}
      }
      this.$emit('close',update)
    },
    getUrl(row) {
      return row.obsUrl || row.assetUrl;
    },
  }
}
</script>

<style scoped lang="scss">
.notFound {
  /deep/ .el-drawer.rtl {
    overflow: scroll;
  }
}

.check-search {
  margin-top: 1em;

  /deep/ .el-form-item {
    margin-bottom: 0;
  }
}

.drawerBody {
  width: 95%;
  margin: 10px auto;
  border-top: 2px solid #F0F2F5;
}

.check-table {
  /deep/ .avue-crud__menu {
    min-height: 0;
  }
}
</style>
